var wkid = 4326;
var token = "44757c5cb4d96f74d897dc4ba430ffa3";
//创建天地图影像底图
var layerTianDiImg = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: getLayerUrlByData('image', wkid, token),
        projection: 'EPSG:' + wkid,
        wrapX: true,
        crossOrigin: 'anonymous'
    })
});

/*
 * 获取在线天地图
 * type:获取的瓦片类型，影像、矢量
 * wkid:坐标系
 * token:官网申请的开发者token
 */
function getLayerUrlByData(type, wkid, token) {
    var url = '', layerId, tileMatrixSetId;
    if (type === 'image') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "img_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'label') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "cia_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'street') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "vec_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'street_label') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "cva_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    }
    return url + 'T=' + layerId + tileMatrixSetId + '&x={x}&y={y}&l={z}&tk=' + token;
}

const map = new ol.Map({
    layers: [layerTianDiImg,],
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([113.4491, 22.9156]),
        zoom: 13
    })
});

const imageStyle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({color: 'yellow'}),
        stroke: new ol.style.Stroke({color: 'red', width: 1}),
    }),
});

// map.on('singleclick', function (e) {
//     console.log('地图被单击了！');
// });
// map.on('dblclick', function (e) {
//     console.log('地图被双击了！');
// });
// map.on('click', function (e) {
//     console.log('地图被点击了！');
// });

// const n = 20; // 总粒子数
// var iii = 1; // 第iii个文件
// map.on('singleclick', function (event) {
//     console.log('地图被单击了！');
//     const vectorContext = ol.render.getVectorContext(event); // 用于获取上下文进行重新绘制
//     const coordinates = [];
//     // 读取点文件，赋值坐标
//     $.ajax({
//         url: "/article/particle_put/ajax_response",
//         type: 'POST',
//         data: {
//             'file_num': iii,
//         },
//         dataType: "json",
//         headers: {"X-CSRFToken": "{ csrf_token }"},
//         success:
//             function (data) {
//                 iii = iii + 1;
//                 map.on('singleclick', function (e) {
//                     console.log('地图被点击了！');
//                     console.log(iii);
//                     locate_data(data)
//                 });
//                 // locate_data(data)
//             }
//     });
//
//     var locate_data = function (data) {
//         console.log(data);
//         let i;
//         for (i = 0; i < data.length - 1; ++i) {
//             var pos = ol.proj.fromLonLat([data[i]["coor_x"], data[i]["coor_y"]]);
//             console.log(pos)
//             const x = pos[0] + iii * 100;
//             const y = pos[1];
//             coordinates.push([x, y]);
//         }
//
//         vectorContext.setStyle(imageStyle);
//         vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
//         map.render();
//     }
// });


const n = 20; // 总粒子数
var iii = 1; // 第iii个文件
layerTianDiImg.on('postrender', function (event) {
    const vectorContext = ol.render.getVectorContext(event); // 用于获取上下文进行重新绘制
    const coordinates = [];
    // 读取点文件，赋值坐标
    $.ajax({
        url: "/article/particle_put/ajax_response",
        type: 'POST',
        data:{
            'file_num': iii,
        },
        dataType: "json",
        headers: { "X-CSRFToken": "{ csrf_token }" },
        success:
            function (data) {
                iii = iii + 1;
                map.on('singleclick', function (e) {
                    console.log('地图被点击了！');
                    console.log(iii);
                    locate_data(data)
                });
                // locate_data(data)
            }
    });

    var locate_data = function (data) {
        console.log(data);
        let i;
        for (i = 0; i < data.length-1; ++i) {
            var pos = ol.proj.fromLonLat([data[i]["coor_x"], data[i]["coor_y"]]);
            console.log(pos)
            const x = pos[0] + iii * 100;
            const y = pos[1];
            coordinates.push([x, y]);
        }

        vectorContext.setStyle(imageStyle);
        vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
        map.render();
    }

    // let i;
    // for (i = 0; i < n; ++i) {
    //     var pos = ol.proj.fromLonLat([113.4491, 22.9156]);
    //     // console.log(pos)
    //     const x = pos[0] + Math.random() * (1000 + 1000) - 1000;
    //     const y = pos[1] + Math.random() * (1000 + 1000) - 1000;
    //     coordinates.push([x, y]);
    // }
    // vectorContext.setStyle(imageStyle);
    // vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
    // map.render();
});
map.render();


// const frequency = 1000;
// var step = 0;
// let apidataLayer = false;
// listener = setInterval(() => {
//     if (step <= frequency)//frequency为总帧数
//     {
//         if (apidataLayer) {
//             map.removeLayer(apidataLayer);
//         }
//
//         // vectorSource.addFeatures(geojsonFormat.readFeatures(timesData[step]));//解析矢量要素
//         let geojsonObject = {
//             // FeatureCollection是规范中的九种GeoJSON类型之一
//             type: "FeatureCollection",
//             // features中存放特征对象
//             features: [
//                 {
//                     // Feature也是规范中的九种GeoJSON类型之一
//                     type: "Feature",
//                     // geometry是几何对象
//                     geometry: {
//                         // Point是规范中的七种几何类型之一
//                         type: "Point",
//                         // coordinates数组中存放位置，第一个是经度方向，第二个是纬度方向，如果有第三个则为高度方向
//                         coordinates: [113.4491, 22.9156]
//                     }
//                 },
//                 {
//                     // Feature也是规范中的九种GeoJSON类型之一
//                     type: "Feature",
//                     // geometry是几何对象
//                     geometry: {
//                         // Point是规范中的七种几何类型之一
//                         type: "Point",
//                         // coordinates数组中存放位置，第一个是经度方向，第二个是纬度方向，如果有第三个则为高度方向
//                         coordinates: [113.4691, 22.9056]
//                     }
//                 },
//             ]
//         };
//         // 当type为Point和MultiPoint时既不能stroke也不能fill，所以创建一个小圆点
//         let image = new ol.style.Circle({
//             radius: 5,
//             fill: new ol.style.Fill({color: 'yellow'}),
//             stroke: new ol.style.Stroke({color: "red", width: 1})
//         });
//         let styles = {
//             // 当几何对象为Point时，使用image样式
//             Point: new ol.style.Style({
//                 image: image
//             }),
//             // 当几何对象为MultiPoint时，使用image样式
//             MultiPoint: new ol.style.Style({
//                 image: image
//             }),
//         };
//         // 样式函数styleFunction，根据特征对象中几何对象的type来返回样式
//         const styleFunction = feature => {
//             return styles[feature.getGeometry().getType()];
//         };
//         // 定义一个矢量源vectorSource，features读取自geojson对象
//         let vectorSource = new ol.source.Vector({
//             features: new ol.format.GeoJSON().readFeatures(geojsonObject)
//         });
//         // 给vectorSource添加圆这个特征对象
//         vectorSource.addFeature(
//             new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6))
//         );
//         apidataLayer = new ol.layer.Vector({
//             source: vectorSource,
//             //矢量要素样式
//             style: styleFunction
//         });
//         map.addLayer(apidataLayer);
//         step++;
//     } else {
//         clearInterval(listener);//移除监听
//     }
// }, 500);//绘制的时间间隔